import { X } from 'lucide-react';

import { Button, ButtonProps } from '@/components/ui/button';
import { PopoverMultiselect } from '@/components/PopoverMultiselect/PopoverMultiselect';

import { ToggleSwitch } from '../ToggleSwitch/ToggleSwitch';
import { TaskCardTags } from '../TaskCard/TaskCardTags';
import { TextArea } from '../Customs';
import { TaskPerformers } from '../TaskCard/TaskPerformers';
import { TaskFiles } from '../TaskCard/TaskFiles';
import { NewTaskFilePreview } from './NewTaskFilePreview';
import { TaskSubmit } from './NewTaskSubmit';
import { TaskDate } from './NewTaskDate';
import { HashIcon } from '../Icons';
import { useNewTask } from '@/hook/useNewTask';

interface Props {
  className?: string;
  taskId?: number;
  postTask(str: any): void;
  setOpen?(bool: boolean): void;
  aiShow?: boolean
  sendBtn: boolean
  setSendBtn(bool: boolean): void;
  name: string
}

export const NewTask = ({ postTask, setOpen, aiShow = true, setSendBtn, sendBtn, name }: Props) => {
  const {
    text,
    task,
    files,
    setTask,
    handleFileRemove,
    handleInputChange,
    handleClearOnBlur,
    updateTask,
    sendFiles,
    handleSubmit,
    performers,
    setTags,
    tags
  } = useNewTask({ postTask, setOpen, setSendBtn });

  const btnProps: ButtonProps = {
    variant: 'ghost',
    className: 'p-1 hover:bg-transparent hover:text-slate-400 text-slate-700'
  };

  const iconProps: IconProps = {
    size: 18
  }

  return (
    <div className='flex flex-col gap-2 rounded-md border border-slate-600 bg-white p-2'>
      <TaskCardTags taskData={task} />
      <div className='flex items-start gap-1'>
        {aiShow && <ToggleSwitch setAuto={(isCheck) => setTask((prev) => ({ ...prev, auto: +isCheck }))} />}
        <TextArea name={name} enterKey enterDown={handleSubmit} defaultValue={text} value={text} placeholder='Подзадача' onChange={handleInputChange} height={18} className='max-h-7 min-h-[28px] w-full overflow-y-hidden  p-1 px-2 text-sm placeholder:text-slate-400  ring-1 ring-slate-600 ' />
        <Button {...btnProps} onClick={handleClearOnBlur}>
          <X {...iconProps} />
        </Button>
      </div>
      <div className='flex items-center gap-2'>
        <TaskPerformers performers={performers} taskPerformers={task.performers} setPerformers={(performers) => setTask((prev) => ({ ...prev, performers }))} />
        <TaskDate endDate={task.end_date} updateTask={updateTask} />
        <PopoverMultiselect
          setTags={(tag: []) => setTask((prev) => ({ ...prev, tags: tag }))}
          setTagList={setTags}
          list={tags}
        >
          <Button {...btnProps}>
            <HashIcon {...iconProps} />
          </Button>
        </PopoverMultiselect>
        {aiShow && <TaskFiles sendFiles={sendFiles} />}
        <TaskSubmit isDisabled={sendBtn} handleSubmit={handleSubmit} />
      </div>
      <NewTaskFilePreview files={files} handleFileRemove={handleFileRemove} />
    </div >
  );
};
